<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>财务及数据</el-breadcrumb-item>
			<el-breadcrumb-item>人才数据查询</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_100">
								<el-select @change="changeBtn" v-model="selectValue" placeholder="选择城市">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.city_name"
										:value="`${item.id}|${item.city_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<!-- <el-form-item class="w_100">
                <el-select v-model="s_personnel_sn" placeholder="选择人才">
                  <el-option
                    v-for="item in renList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.staff_sn"
                  ></el-option>
                </el-select>
              </el-form-item> -->
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_130"
									v-model="s_personnel_name"
									:fetch-suggestions="querySearch"
									placeholder="选择人才"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item prop="date1">
								<el-date-picker
									size="mini"
									type="date"
									class="w_120i"
									value-format="yyyy-MM-dd"
									placeholder="开始日期"
									:picker-options="pickerOptions0"
									v-model="ruleForm.date1"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2">
								<el-date-picker
									size="mini"
									type="date"
									class="w_120i"
									value-format="yyyy-MM-dd"
									placeholder="结束日期"
									:picker-options="pickerOptions0"
									v-model="ruleForm.date2"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="talentList" stripe>
						<el-table-column prop="id" label="序号" width="60" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="date" label="日期" align="center"> </el-table-column>
						<el-table-column prop="city_name" label="城市" align="center"> </el-table-column>
						<el-table-column prop="area_name" label="商圈" align="center"> </el-table-column>
						<el-table-column prop="staff_name" label="人才" align="center"> </el-table-column>
						<el-table-column prop="is_area_first" label="新出工人才" align="center">
							<template slot-scope="{ row, $index }">
								<!-- <span v-if="row.is_area_first == '1'">是</span>
                                <span v-else>否</span> -->
								<span>{{ row.is_area_first }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="hour_actual_finish" label="实际出工时长" align="center"> </el-table-column>
						<el-table-column prop="hour_expect_start" label="计划出工时长" align="center"> </el-table-column>
						<!-- <el-table-column prop="schedule_morning" label="早班（时长H）">
                        </el-table-column>
                        <el-table-column prop="time_slot_noon" label="中班（时长H）">
                        </el-table-column>
                        <el-table-column prop="schedule_evening" label="晚班（时长H）">
                        </el-table-column>
                        <el-table-column prop="schedule_night" label="夜班（时长H）">
                        </el-table-column> -->
						<el-table-column label="时长H" align="center">
							<el-table-column prop="time_slot_morning" label="早班" align="center"> </el-table-column>
							<el-table-column prop="time_slot_noon" label="中班" align="center"> </el-table-column>
							<el-table-column prop="time_slot_evening" label="晚班" align="center"> </el-table-column>
							<el-table-column prop="time_slot_night" label="夜班" align="center"> </el-table-column>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<!-- <page :total="total" @pagedata="onChildValue"></page> -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
import { fetchCityList } from '@/api/city.js'
export default {
	name: 'AreaLists',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			cityList: [], //城市列表
			talentList: [], //人才数据列表
			renList: [], //人才列表
			selectValue: '', //获取id和value
			s_city_id: '',
			s_city_name: '',
			s_personnel_sn: '',
			s_personnel_name: '',
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},
			// 设置只能选择当前日期之前的日期
			pickerOptions0: {
				disabledDate(time) {
					return time.getTime() >= Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
				}
			},
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	created() {
		if (!sessionStorage.getItem('manageInfo')) {
			// 判断是否登录
			window.location = 'login.html'
			return
		}

		let pagingArr = JSON.parse(sessionStorage.getItem('pagingArr')) //分页存储
		if (pagingArr) {
			let paging = pagingArr.filter(val => {
				return val.name == 'personnelList'
			})
			paging = paging[0]
			if (paging) {
				sessionStorage.removeItem('pagingArr') //清除分页存储
			} else {
			}
		} else {
		}

		//时间的默认选中
		var d = this.date(-1)
		this.ruleForm.date1 = d
		this.ruleForm.date2 = d
	},
	mounted() {
		this.getcityList()
		this.PersonnelList()
	},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		// 获取城市列表
		async getcityList() {
			try {
				let ret = await fetchCityList()
				this.cityList = ret.list
				this.selectValue = this.cityList[0].city_name
				this.s_city_id = this.cityList[0].id
				this.gettalentList()
			} catch (err) {
				console.log('err:', err)
			}
		},

		PersonnelList() {
			//获取人才列表
			let fn = new FormData()
			// 展示已认证过的人员姓名
			fn.append('certification_status', 1) //实名认证状态 [1]已认证 [2]未认证
			this.$http.post(this.url + '/user/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.renList = res.data.data.list
						} else {
							this.renList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		gettalentList() {
			//获取人才数据列表
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('city_id', this.s_city_id)
			if (this.s_personnel_name == '') {
				this.s_personnel_sn = ''
			}
			fn.append('staff_sn', this.s_personnel_sn)
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 == null) {
				this.ruleForm.date1 = ''
			}
			if (this.ruleForm.date2 == null) {
				this.ruleForm.date2 = ''
			}
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}

			fn.append('date_start', ruleForm_date1)
			fn.append('date_end', ruleForm_date2)
			this.$http.post(this.url + '/report/listDetail', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.talentList = res.data.data.list
						this.total = res.data.data.count
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		changeBtn() {
			if (this.selectValue == '') {
				this.s_city_id = ''
				this.s_city_name = ''
				return false
			}
			let [id, name] = this.selectValue.split('|') // es6 数组解构赋值
			this.s_city_id = id
			this.s_city_name = name
		},

		shearchBtn() {
			//请求列表
			this.pageNum = 1
			this.gettalentList()
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.gettalentList()
		},

		resetBtn() {
			//重置
			this.resetDataReset() //重置请求数据
			this.getcityList()
			this.pageNum = 1
			this.gettalentList()
		},
		resetDataReset() {
			this.s_personnel_sn = ''
			this.s_personnel_name = ''
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.renList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			// console.log(item)
			this.s_personnel_sn = item.staff_sn
		},
		//导出
		downloadOrder() {
			if (this.s_personnel_name == '') {
				this.s_personnel_sn = ''
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				city_id: this.s_city_id,
				staff_sn: this.s_personnel_sn,
				date_start: this.ruleForm.date1,
				date_end: this.ruleForm.date2
			}

			let param = $.param(obj)
			window.location.href = this.url + '/report/exportListDetail?' + param
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 420px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.roleFunctionBox {
	border: 1px solid #e8e8e8;
	border-radius: 5px;
	padding: 5px;
}
.roleFunctionBox .roleTitle {
	border-bottom: 1px solid #e8e8e8;
}
.roleFunctionBox .roleTitle h3 {
	padding-left: 5px;
	line-height: 30px;
}
.roleFunctionBox .roleTitle h3 span:nth-child(1) {
	display: inline-block;
	width: 110px;
}
.roleFunctionBox .menuName {
	width: 100px;
	padding: 10px 10px 0 0;
	font-size: 14px;
	color: #999999;
	text-align: right;
}
.roleFunctionBox .menFunction {
	width: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
.s_submit {
	right: -1px;
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
}
.wrap_h5 h5 {
	font-weight: 300;
}
</style>



// WEBPACK FOOTER //
// src/components/sheet/TalentQuery.vue